<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 <template> 不会渲染的一个标签，一般作为容器分组使用
	 
	 v-if="条件"
	 v-else-if="条件1"
	 v-else-if="条件2"
	 v-else
	 
	 用 key 管理复用元素
	 
	 带有 v-show 的元素始终会被渲染并保留在 DOM 中。
	 v-show 只是简单地切换元素的 CSS 的 display。
	 
	 * v-if VS v-show
	 -->
	<div id="app">
		<!-- 
		<h1 v-if="isShow">{{ msg }}</h1>
		<p v-else style="text-align: center;">😁</p> 
		
		<div v-if="isShow">
			<h1>{{ msg }}</h1>
			<p>第一段话！</p>
			<p>第二段话！</p>
		</div>
		<template v-if="isShow">
			<h1>{{ msg }}</h1>
			<p>第一段话！</p>
			<p>第二段话！</p>
		</template>
		
		<div v-if="type === 'A'">
		  A
		</div>
		<div v-else-if="type === 'B'">
		  B
		</div>
		<div v-else-if="type === 'C'">
		  C
		</div>
		<div v-else>
		  Not A/B/C
		</div>
		-->
		<h1 v-if="isShow">v-if: {{ msg }}</h1>
		<h1 v-show="isShow">v-show: {{ msg }}</h1>
		<template v-if="loginType === 'username'">
		  <label>Username</label>
		  <input key="1" placeholder="Enter your username">
		</template>
		<template v-else>
		  <label>Email</label>
		  <input key="2" placeholder="Enter your email address">
		</template>
		
		<hr>
		<div v-show="loginType === 'username'">
		  <label>Username</label>
		  <input key="1" placeholder="Enter your username">
		</div>
		<div v-show="loginType !== 'username'">
		  <label>Email</label>
		  <input key="2" placeholder="Enter your email address">
		</div>
		<hr>
		<button @click="toggleLoginType">toggle loginType</button>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: v-if！",
				isShow: true,
				type: 'A',
				loginType: 'username'
			},
			methods: {
				toggleLoginType() {
					if (this.loginType === "username") {
						this.loginType = !"username"
					} else{
						this.loginType = "username"
					}
				}
			},
		}).$mount("#app")
	</script>
</body>
</html>